<template>
	<view class="body">
		<view class="content" v-for="item in list">
			<view class="img">
				<image src="../../assets/img/tubiao.png" mode=""></image>
			</view>
			<view class="con">
				<p>{{item.courseName}}</p>
				<progress :percent="item.consumed" activeColor="#10AEFF" stroke-width="6" />
				<view class="mess">
					<p>已上{{item.consumed}}节</p><p>购买{{item.coursecounts}}节</p>
				</view>
			</view>
			<view class="righticon">
				<p class="iconfont icon-more"></p>
			</view>
		</view>
		<view class="tishi" v-if="list.length==0">
			<image src="../../assets/img/tishi.png" mode=""></image>
			<p>亲，您还没有消课记录</p>	
		</view>
	</view>
</template>

<script>
	import {getstudentsconsume} from '../../api/index.js'
	export default {
			data() {
				return {
					list:[]
				}
			},
			methods: {
				async getlist(){
					let res = await getstudentsconsume()
					if(res.errCode==10000){
						console.log(res)
						this.list=res.data.list
					}
				}
			},
			onLoad(){
				this.getlist()
			}
		}
</script>

<style scoped lang="less">
	.body{
		min-height: 100vh;
		width: 750rpx;
		background-color: #f2f3f5;
		border-top: 1rpx solid #f2f3f5;
		.tishi{
			width: 250rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				display: flex;
				font-size: 25rpx;
				color: #8F939C;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 135rpx;
					height: 140rpx;
					margin-bottom: 10rpx;
					
				}
			}
		
		.content{
			width: 685rpx;
			height: 240rpx;
			background-color: #FFFFFF;
			margin-top: 55rpx;
			border-radius: 40rpx;
			margin-left: 32rpx;
			display: flex;
			.img{
				width: 130rpx;
				padding: 45rpx 0 0 35rpx;
				box-sizing: border-box;
				image{
					width: 69rpx;
					height: 65rpx;
				}
			}
			.con{
				flex: 1;
				padding-top:45rpx ;
				padding-right: 38rpx;
				>p{
					font-size: 32rpx;
					margin-bottom: 38rpx;
				}
				.mess{
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
				}
				
			}
			.righticon{
				width: 68rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4890f0;
			}
		}
	}
</style>
